<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet" />
		<style>
			*{margin: 0;
			padding: 0;
			font-family: "楷体";
				}
				a{
					text-decoration: none;
					color: floralwhite;
				}
				.wrpbox1{
					height: 40px;
					width: 100%;
					background-color:  rgba(0,0,0,0.4);
				}
			.box1{
				position:relative;
				margin: 0 auto;
				height: 40px;
				width: 1500px;
				display: flex;
				background-color: 
				z-index: 1;
			}
			.box1-1 a{
				position: absolute;
				top: 8px;
				left: 100px;
				z-index: 1;
			}
			.box1-1 a:hover{
				color: rgba(0,0,0,0.1);
			}
			.box1-2 a{
				position: absolute;
				top: 8px;
				left: 150px;
				z-index: 1;
			}
			.box1-2 a:hover{
				color: rgba(0,0,0,0.1);
			}
			.box1-3 a{
				display: inline-block;
				height: 100%;
			}
			.box1-3 a:hover{
				color: #2E7C04;
				
			}
			.box1-3-1 span{
				position: absolute;
				top: 8px;
				right: 800px;
				
			}
			.box1-3-2 a{
				position: absolute;
				top: 8px;
				right: 300px;
				z-index: 1;
			}
			.box1-3-3 a{
				position: absolute;
				top: 8px;
				right: 700px;
				z-index: 1;
			}
			.box1-3-4 a{
				position: absolute;
				top: 8px;
				right: 600px;
				z-index: 1;
			}
			.box1-3-5 a{
				position: absolute;
				top: 8px;
				right: 500px;
				z-index: 1;
			}
			.box1-3-6 a{
				position: absolute;
				top: 8px;
				right: 400px;
				z-index: 1;
			}
			.box2{
				margin: 0 auto;
				width: 1500px;
				height: 150px;
				
				position: relative;
				z-index: 1;
			}
			.box2-1{
				top: 40px;
				width: 600px;
				height: 80px;
				
				position: absolute;
				left: 50px;
			}
			.box2-2{
				width: 300px;
				
				position: absolute;
				right: 450px;
			}
			.searchbox{
				position: absolute;
				top: 50px;
				width: 300px;
				background-color: #2f3640;
				height: 20px;
				border-radius: 40px;
				padding: 10px;
				z-index: 1;
			}
			.searchbox input{
				width: 200px;
			}
			.searchbin{
				color: azure;
				float: right;
				width: 50px;
			}
			.searchbox i:hover{
				color: #B22222;
				cursor: hand;
			}
			.box2-2-2{
				position: absolute;
				top: 130px;
				z-index: 1;
				}
				.box2-2-2 span:hover{
					color: red;
				}
			.box2-3{
				position: absolute;
				height: auto;
				border: 1px  solid;
				right: 50px;
				top: 40px;
				height: 80px;
				width: 250px;
			}
			.box2-3-1{
				width: 200px;
				height: 3.125rem;
				border: 1px solid;
			
				border-radius: 10px;
				
			}
			.box2-3-1 a span:hover{
				color: #2E7C04;
			}
			.box2-4{
				position: absolute;
				bottom: 1px;
				left: 50px;
			}
			.box3{
				margin: 0 auto;
				width: 1500px;
				height: 570px;
				
				position: relative;
				z-index: 1;
			}
			.box3-1{
				position: absolute;
				top: 20px;
				width: 300px;
				height: 570px;
				left: 50px;
				
				
			}
			.box3-1 h1{
				text-align: center;
				background-color: red;
				border: 1px red;
			}
			.box3-1-1{
				width: 300px;
				height: 160px;
				
				margin-bottom: 20px;
			}
			.box3-1-2{
				width: 300px;
				height: 160px;
				
				margin-bottom: 20px;
			}
			.box3-1-3{
				width: 300px;
				height: 160px;
				
				margin-bottom: 20px;
			}
			.box3333{
				position: absolute;
				top: 20px;
				width: 1100px;
				height: 570px;
				right: 50px;
				background-color: #7FFFD4;
				z-index: 1;
				
			}
			.wrpbox4{
				width: 100%;
				height: 450px;
				
			}
			.box4{
				margin: 0 auto;
				width: 1500px;
				height: 450px;
				
				position: relative;
				z-index: 1;
			}
			.box4-1 h1{
				text-align: center;
				margin-top: 50px;
				height: 50px;
				
			}
			.images{
				width: 240px;
				height: 380px;
			}
			.images1{
				margin-left: 65px;
				width: 290px;
				height: 390px;
			}
			.imagelist{
				overflow: hidden;
				width: 100%;
				height: 570px;
			}
			.images2{
				width: 100%;
				height: 570px;
			}
			.box4-3{
				margin: 0 auto;
				width: 1500px;
				height: 100px;
				
				position: relative;
			
				z-index: 1;
			}
			.box4-3-1{
				width: 240px;
				height: 100px;
				
				float: left;
			}
			.box4-3-2{
				width: 240px;
				height: 100px;
				
				margin-left: 8px;
				float: left;
			}
			.box4-3-3{
				width: 240px;
				height: 100px;
				
				float: left;
				margin-left: 8px;
			}
			.box4-3-4{
				width: 240px;
				height: 100px;
				
				margin-left: 8px;
				float: left;
			}
			.box4-3-5{
				width: 240px;
				height: 100px;
				margin-left: 8px;
				
				float: left;
			}
			.box4-3-6{
				width: 240px;
				height: 100px;
				margin-left: 8px;
				
				float: left;
			}
			.box5{
				margin: 0 auto;
				width: 1500px;
				height: 500px;
				
				position: relative;
				z-index: 2;
			}
			.box5-1 h1{
				text-align: center;
				margin-top: 50px;
				
				
			}
			.color1{
				width: 20px;
				height: 1.25rem;
				margin-left: 10px;
				margin-top: 10px;
				background-color: orange;
				display: inline-block;
			}
			.color2{
				width: 20px;
				height: 1.25rem;
				margin-left: 10px;
				margin-top: 10px;
				background-color: yellow;
				display: inline-block;
			}
			.color3{
				width: 20px;
				height: 1.25rem;
				margin-left: 10px;
				margin-top: 10px;
				background-color: greenyellow;
				display: inline-block;
			}
			.box3-1-1-2 span{
				font-size: 20px;
				display: inline-block;
				margin-left: 10px;
				margin-top: 20px;
				color: red;
				cursor: hand;
			}
			.box3-1-1-2 a span:hover{
				color: olivedrab;
			}
			.box3-1-2-2 span{
				font-size: 20px;
				display: inline-block;
				margin-left: 10px;
				margin-top: 20px;
				color: red;
				cursor: hand;
			}
			.box3-1-2-2 a span:hover{
				color: olivedrab;
			}
			.box3-1-3-2 span{
				font-size: 20px;
				display: inline-block;
				margin-left: 10px;
				margin-top: 20px;
				color: red;
				cursor: hand;
			}
			.box3-1-3-2 a span:hover{
				color: olivedrab;
			}
			.button:hover{
				background-color: red;
			}
			
		</style>
	</head>
	<body>
		<div class="wrpbox1">
			<div class="box1">
				<div class="box1-1">
					<a href="主页.html"><i class="fa fa-android">首页</i></a>
					
				</div>
				<div class="box1-2">
					<a href="#"><i class="fa fa-shopping-basket">购物</i></a>
				</div>
				<div class="box1-3">
					<div class="box1-3-1">
					<span>你好朋友,购物愉快</span>
					</div>
					<div class="box1-3-2">
					<a href="#">我的订单</a>
					</div>
					<div class="box1-3-3">
					<a href="#">我的会员</a>
					</div>
					<div class="box1-3-4">
					<a href="#">企业采购</a>
					</div>
					<div class="box1-3-5">
					<a href="#">客户服务</a>
					</div>
					<div class="box1-3-6">
					<a href="#">手机端</a>
					</div>
				</div>
			</div>
		</div>
		
		<div class="box2">
			<div class="box2-1">
				<h1 style="color: red;font-size: 40px;">运动约球吧运动商城</h1>
				<h1 style="color: black;">运动大牌,你值得拥有</h1>
			</div>
			
			<div class="box2-2">
				<div  class="searchbox">
					<input type="text"placeholder="点击搜索" />
					<a class="searchbin" href="https://www.baidu.com/"><i class="fa fa-search-minus"></i></a>
				</div>
				<div class="box2-2-2">
					<a href="#"><span>阿迪达斯</span></a>
					<a href="#"><span>皮肤衣</span></a>
					<a href="#"><span>跑步机</span></a>
					<a href="#"><span>自行车</span></a>
					<a href="#"><span>瑜伽服</span></a>
				</div>
				
			</div>
			<div class="box2-3">
				<div class="2-3-1">
					<a href="#"><span style="font-size: 20px;color: #B22222;">您的购物车里有__件物品</span><i class="fa fa-shopping-bag"style="color: #000000;"></i></a>
					<a href="#"><p style="color: #B22222;">买买买，买过不会后悔，买过一身轻松!</p></a>
				</div>
			</div>
			<div class="box2-4">
				<i class="fa fa-heart" style="color: red;"></i>
				<span style="color: red;">关注频道</span>
				<span style="display: inline-block;border-right:1px #000000 solid;margin-left: 50px;">体育服务</span>
				<span style="display: inline-block;border-right:1px #000000 solid;margin-left: 30px;">运动馆</span>
				<span style="display: inline-block;border-right:1px #000000 solid;margin-left: 30px;">体育馆</span>
				<span style="display: inline-block;border-right:1px #000000 solid;margin-left: 30px;">骑行馆</span>
				<span style="display: inline-block;border-right:1px #000000 solid;margin-left: 30px;">健身馆</span>
			</div>
		</div>
		<div class="box3">
			<div class="box3-1">
				<h1>运动分类</h1>
				<div class="box3-1-1">
					<div class="box3-1-1-1">
						<div class="color1"></div><h4 style="font-size: 30px;display: inline-block;	color: olivedrab;">运动鞋服</h4>
					</div>
					<div class="box3-1-1-2">
						<a href="#"><span>运动服饰</span></a>
						<a href="#"><span>运动鞋包</span></a>
						<a href="#"><span>超级大牌</span></a>
						<a href="#"><span>疾跑神鞋</span></a>
						<a href="#"><span>运动T恤</span></a>
						<a href="#"><span>运动拖鞋</span></a>
					</div>
				</div>
				<div class="box3-1-2">
					<div class="box3-1-2-1">
						<div class="color2"></div><h4 style="font-size: 30px;display: inline-block;	color: olivedrab;">户外骑行</h4>
					</div>
					<div class="box3-1-2-2">
						<a href="#"><span>户外鞋服</span></a>
						<a href="#"><span>户外装备</span></a>
						<a href="#"><span>骑行运动</span></a>
						<a href="#"><span>野营烧烤</span></a>
						<a href="#"><span>电动快车</span></a>
						<a href="#"><span>优皮肤衣</span></a>
					</div>
				</div>
				<div class="box3-1-3">
					<div class="box3-1-3-1">
						<div class="color3"></div><h4 style="font-size: 30px;display: inline-block;	color: olivedrab;">体育用品</h4>
					</div>
					<div class="box3-1-3-2">
						<a href="#"><span>大型器械</span></a>
						<a href="#"><span>小型器材</span></a>
						<a href="#"><span>跑步机</span></a>
						<a href="#"><span>武术搏击</span></a>
						<a href="#"><span>仰卧板</span></a>
						<a href="#"><span>划船机</span></a>
					</div>
				</div>
				
			</div>
			<div class="box3333">
				<div class="imagelist">
					<ul>
						<li class="item"><img class="images2" src="img/07f40f745c8c8564.jpg!cc_1980x918.webp" /></li>
						
					</ul>
				</div>	
			</div>
			
		</div>
		<wbr></wbr>
		<div class="box4">
			<div class="box4-1"><h1>————————品牌特卖————————</h1></div>
			<wbr></wbr>
			<div class="box4-2">
				<img class="images" src="img/QQ截图20201225142525.png" />
				<img class="images" src="img/QQ截图20201225142609.png" />
				<img class="images" src="img/QQ截图20201225142658.png" />
				<img class="images" src="img/QQ截图20201225142749.png" />
				<img class="images" src="img/QQ截图20201225142725.png" />
				<img class="images" src="img/QQ截图20201225142812.png" />
			</div>
			<div class="box4-3">
				<div class="box4-3-1">
					<p style="text-align: center;font-weight: 600;">Timberland官方旗舰店</p>
					<p style="text-align: center;">国际户外名品牌</p>
					<a href="#"><p style="text-align: center;"><button style="width: 150px; height: 60px; font-size: 25px;font-weight: 600;">进店看看</button></p></a>
				</div>
				<div class="box4-3-2">
					<p style="text-align: center;font-weight: 600;">安踏官方旗舰店</p>
					<p style="text-align: center;">安踏，永不止步，Keep Moving！</p>
					<a href="#"><p style="text-align: center;"><button style="width: 150px; height: 60px; font-size: 25px;font-weight: 600;">进店看看</button></p></a>
				</div>
				<div class="box4-3-3">
					<p style="text-align: center;font-weight: 600;">Keep京东自营旗舰店</p>
					<p style="text-align: center;">自律给我自由</p>
					<a href="#"><p style="text-align: center;"><button style="width: 150px; height: 60px; font-size: 25px;font-weight: 600;">进店看看</button></p></a>
				</div>
				<div class="box4-3-4">
					<p style="text-align: center;font-weight: 600;">Under Armour官方旗舰店</p>
					<p style="text-align: center;">让运动者更强，全店满199元免</p>
				<a href="#"><p style="text-align: center;"><button style="width: 150px; height: 60px; font-size: 25px;font-weight: 600;">进店看看</button></p></a>
				</div>
				<div class="box4-3-5">
					<p style="text-align: center;font-weight: 600;">WalkingPad京东自营旗舰店</p>
					<p style="text-align: center;">WalkingPad京东自营旗舰店</p>
					<a href="#"><p style="text-align: center;"><button style="width: 150px; height: 60px; font-size: 25px;font-weight: 600;">进店看看</button></p></a>
				</div>
				<div class="box4-3-6">
					<p style="text-align: center;font-weight: 600;">李宁官方网店</p>
					<p style="text-align: center;">中国运动鞋服领导品牌！</p>
					<a href="#"><p style="text-align: center;"><button style="width: 150px; height: 60px; font-size: 25px;font-weight: 600;">进店看看</button></p></a>
				</div>
			</div>
			<wbr></wbr>
			<div class="box5">
				<div class="box5-1"><h1>———— 潮流发布 ————</h1></div>
				<wbr></wbr>
				<div class="box5-2">
					<a href="#"><img class="images1" src="img/QQ截图20201225162313.png" /></a>
					<a href="#"><img class="images1" src="img/QQ截图20201225162258.png" /></a>
					<a href="#"><img class="images1" src="img/QQ截图20201225162225.png" /></a>
					<a href="#"><img class="images1" src="img/QQ截图20201225162143.png" /> </a>
				</div>
				<wbr></wbr>
				<div class="box5-3">
					<h1 style="text-align: center;margin-top: 30px;">——————心动不如行动，你还在等什么呢——————</h1>
				</div>
				<wbr></wbr>
			</div>
		</div>
		
		
	</body>
</html>
